<template>
    <div class="common-layout" style="height: 100%;">
      <el-container style="height: 100%;">
        <el-aside width="200px" style="background-color: #545c64;">
          <CommonAside></CommonAside>
        </el-aside>
        <el-container>
          <el-header style="background-color: #545c64;color:#fff; text-align: center;">
            <el-row :gutter="20">
              <el-col :span="16" :offset="0">
                <span style="float: left;font-size: 35px;">TMS智慧物流管理</span>                
              </el-col>
              <el-col :span="8" :offset="0">
                <el-avatar
                style="margin-top: 10px;"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                />
                &nbsp;
                <span>欢迎您，</span>
                <span style="color: yellow;">{{ username }}</span>小同学
                <el-button style="float: right;margin-top: 15px;border: none;" type="danger" round :icon="Close" @click="exitStstem">退出登录</el-button>
              </el-col>
            </el-row>
          </el-header>
          <el-main>
              <RouterView />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  <script setup lang="ts">
  import CommonAside from '../components/CommonAside.vue'
  import { useRouter } from 'vue-router'
  import { Document, Menu as IconMenu, Location, Setting,Close } from '@element-plus/icons-vue'

  const router = useRouter()
  //退出登录
  const exitStstem = () => {
    router.push("/")
  }
  const username = localStorage.getItem("username")
  console.log(username)
  </script>